var SummaryRecord = function () {
  var template = /*html*/ `
    <div class="summary-record" v-loading.fullscreen.lock="loading">
      <div class="search-btns">
        <search-btn-view btn-text="查询汇总" @before-open="resetSearch" @search="searchData">
          <div slot="search-content">
          <sys-common-search :search="search" request-url="putOutNew/getPutOutWarehouseOrderList" :search-field="searchFields"
            label-width="auto" input-width="165px" :dropdown-props="{machining:'物料类型'}">
            <template slot="append">
              <el-form-item label="是否有库存">
                <el-select clearable style="width:165px;" placeholder="请选择是否有库存" v-model="search.isHaveStock">
                  <el-option v-for="queryType in queryTypeList" :key="queryType.value" :label="queryType.label"
                    :value="queryType.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </sys-common-search>
          </div>
        </search-btn-view>
      </div>
      <div class="summary-record-table-div" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border :data="summaryList" style="width:100%;" height="parent">
          <el-table-column :resizable="false" label="操作" width="210px" align="center" key="operation">
            <template slot-scope="scope">
              <el-button v-if="hasCreateOrderAuthority" size="mini" type="primary" @click="handleOrderClick('createOrder',scope.row)">生成外协单</el-button>
              <el-button v-if="hasOutHandoverAuthority" size="mini" type="primary" @click="handleOrderClick('outHandover',scope.row)">外协交接</el-button>
            </template>
          </el-table-column>
          <el-table-column key="orderId" prop="orderId" label="订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column key="companyOrderId" prop="companyOrderId" label="公司订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column key="factoryId" prop="factoryId" label="工厂型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column key="customerId" prop="customerId" label="客户型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" key="rowIndex" label="订单序号" width="75px" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.rowIndex==='-1'?0:scope.row.rowIndex}}</span>
            </template>
          </el-table-column>
          <el-table-column key="materialType" prop="materialType" label="物料类型" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="物料类型" width="210px" align="center" key="operation" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.additionalMaterialType !=''" >{{scope.row.materialType}}-电镀-{{scope.row.additionalColor}}</span>
              <span v-else>{{scope.row.materialType}}</span>
            </template>
          </el-table-column>
          
          <el-table-column key="color" prop="color" label="颜色" min-width="100px" header-align="center"></el-table-column>
          <el-table-column key="count" prop="count" label="合格数" min-width="80px" align="center"></el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>

      <el-dialog :title="orderCirculationType==='createOrder'?'生成外协单':'外协交接'" :visible.sync="openOrderCirculation" top="10vh" width="750px"
        @closed="dialogClosed">
        <div v-if="openOrderCirculation" style="height:calc(80vh - 54px);overflow:auto">
          <create-out-order v-if="orderCirculationType==='createOrder'" :order-id="selectRecord.orderId" @save-success="createSuccess"></create-out-order>
          <out-handover v-if="orderCirculationType==='outHandover'" :order-id="selectRecord.orderId" @save-success="createSuccess"></out-handover>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        orderId: '',
        companyOrderId: '',
        factoryId: '',
        customerId: '',
        customerOrderId: '',
        machining: '',
        isHaveStock: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        searchFields: ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'customerOrderId', 'machining'],
        summaryList: [],
        queryTypeList: i18n.getDropDown('outBusinessMgr.warehouse.queryType', [1, 2]),
        hasCreateOrderAuthority: false, //生成外协单权限
        hasOutHandoverAuthority: false, //外协交接权限
        openOrderCirculation: false,
        orderCirculationType: null,
        selectRecord: null
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setAuthority(),
        this.setSummaryList(true)
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setSummaryList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var postData = {
          materialType: search.machining
        };
        var fields = ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'customerOrderId', 'isHaveStock'];
        SysUtil.setPostData(postData, search, fields, true, true);

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        var self = this;
        return ajaxRequest('putOutNew/getPutWarehouseSumData', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var summaryList = res.returnData;
          self.summaryList = summaryList;
          self.pagination.totalCount = res.iTotalRecords;
          return res;
        });
      },

      setAuthority: function () {
        var authorityList = [
          "putOutNew/addPutoutOrder",
          "putOutNew/putOutWarehouseToWorkshopOrWarehouse"
        ];
        var self = this;
        return PermissionUtil.validateAuthority(authorityList).then(function (validate) {
          self.hasCreateOrderAuthority = validate['putOutNew/addPutoutOrder'];
          self.hasOutHandoverAuthority = validate['putOutNew/putOutWarehouseToWorkshopOrWarehouse'];
          return validate;
        });
      },

      resetSummaryList: function (isSearch) {
        this.loading = true;
        var self = this;
        this.setSummaryList(isSearch).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.resetSummaryList(true);
      },

      pageChange: function () {
        this.resetSummaryList();
      },

      handleOrderClick: function (type, record) {
        this.orderCirculationType = type;
        this.openOrderCirculation = true;
        this.selectRecord = record;
      },

      createSuccess: function () {
        this.openOrderCirculation = false;
      },

      dialogClosed: function () {
        this.selectRecord = null;
        this.orderCirculationType = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch,
      CreateOutOrder: CreateOutOrder,
      OutHandover: OutHandover
    },

    template: template
  };
}();
